<template>
  <div class="category-container">
    <el-card class="category-card">
      <div slot="header" class="card-header">
        <span>商品类别排序</span>
        <el-button
            type="primary"
            size="small"
            icon="el-icon-plus"
            @click="handleAdd">
          新增类别
        </el-button>
      </div>

      <!-- 拖拽排序列表 -->
      <el-table
          v-loading="loading"
          :data="categoryList"
          row-key="id"
          border>
        <el-table-column label="排序" width="80" align="center">
          <template slot-scope="scope">
            <span class="sort-handle">
              <i class="el-icon-rank"></i>
<!--              {{ scope.$index + 1 }}-->
              {{ scope.row.sortIndex }}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="categoryName" label="类别名称">
          <template slot-scope="scope">
            <el-input
                v-if="scope.row.isEdit"
                v-model="scope.row.categoryName"
                size="small"
                @keyup.enter.native="handleSave(scope.row)"
            >
            </el-input>
            <span v-else>{{ scope.row.categoryName }}</span>
          </template>
        </el-table-column>

<!--        <el-table-column prop="status" label="状态" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <el-switch-->
<!--                v-model="scope.row.status"-->
<!--                :active-value="1"-->
<!--                :inactive-value="0"-->
<!--                @change="handleStatusChange(scope.row)">-->
<!--            </el-switch>-->
<!--          </template>-->
<!--        </el-table-column>-->

<!--        <el-table-column label="操作" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <el-button-->
<!--                type="text"-->
<!--                size="small"-->
<!--                @click="handleEdit(scope.row)">-->
<!--              编辑-->
<!--            </el-button>-->
<!--            <el-button-->
<!--                type="text"-->
<!--                size="small"-->
<!--                @click="handleViewProducts(scope.row)">-->
<!--              查看商品-->
<!--            </el-button>-->
<!--            <el-button-->
<!--                type="text"-->
<!--                size="small"-->
<!--                class="delete-btn"-->
<!--                @click="handleDelete(scope.row)">-->
<!--              删除-->
<!--            </el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
    </el-card>

    <!-- 商品列表弹窗 -->
<!--    <el-dialog-->
<!--        :title="`${currentCategory.name || ''} - 商品列表`"-->
<!--        :visible.sync="productDialogVisible"-->
<!--        width="800px">-->
<!--      <el-table-->
<!--          v-loading="productLoading"-->
<!--          :data="productList"-->
<!--          border>-->
<!--        <el-table-column prop="name" label="商品名称"></el-table-column>-->
<!--        <el-table-column prop="price" label="价格" width="120">-->
<!--          <template slot-scope="scope">-->
<!--            ¥{{ scope.row.price.toFixed(2) }}-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="stock" label="库存" width="100"></el-table-column>-->
<!--        <el-table-column prop="status" label="状态" width="100" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <el-tag :type="scope.row.status === 1 ? 'success' : 'info'">-->
<!--              {{ scope.row.status === 1 ? '上架' : '下架' }}-->
<!--            </el-tag>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--      </el-table>-->
<!--    </el-dialog>-->
  </div>
</template>

<script src="./category.js" />

<style lang="scss" scoped src="./category.scss" />